<template>
	<u-tabbar :value="tabValue" @change="changeTab" :fixed="true" :placeholder="true" :safeAreaInsetBottom="true"
		:zIndex="100" :border="false">
		<u-tabbar-item text="任务" icon="home"></u-tabbar-item>
		<u-tabbar-item>
			<view slot="active-icon" class="tabMessage"><image class="tabImg" src="@/static/images/tabmessageicon.png"/></view>
			<view slot="inactive-icon" class="tabMessage"><image class="tabImg" src="@/static/images/tabmessageicon.png"/></view>
		</u-tabbar-item>
		<u-tabbar-item text="我的" icon="account"></u-tabbar-item>
	</u-tabbar>
</template>

<script>
	export default {
		name: "cTabBar",
		props:{
			tabValue:Number, //默认选中项
		},
		data() {
			return {
				pathList:[
					{url:'pages/index/index'},
					{url:'pages/message/message'},
					{url:'pages/user/user'},
				]
			};
		},
		methods: {
			changeTab(e) {
				let pathUrl = this.pathList[e].url
				console.log("tabbar",pathUrl)
				uni.$u.route({
					url: pathUrl,
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	/deep/.u-tabbar__content{
		box-shadow:$uni-box-shadow-base;
	}
	.tabMessage{
		width: 100rpx;
		height: 100rpx;
		border-radius: 100px;
		position: relative;
		top:-30rpx;
		background-color: #ffffff;
		display:flex;
		align-items: center;
		justify-content: center;
		box-shadow:$uni-box-shadow-base;
		.tabImg{
			width: 80rpx;
			height: 80rpx;
		}
	}

</style>
